<template>
  <div>
    <Navbar style="background-color:white">
      <span
        slot="left"
        class="iconfont icon-arrow-left icon"
        @click="$router.push('../home')"
      ></span>
      <div slot="center" class="center">
        <span class="iconfont icon-fangdajing fangdajing">
          家电返厂同价双11.11</span
        >
      </div>
      <div slot="right" class=" iconfont  icon  icon-ellipsis right"></div>
    </Navbar>
    -->
    <section class="selectitem" >
      <div class="selectbox" :class="{'active': orderBy === 'default'}" data-orderBy="defautl" @click="selectOrder($event)">默认排序</div>
      <div class="selectbox" :class="{'active': orderBy === 'price-asc'}" data-orderBy="price-asc" @click="selectOrder($event)">
        升序<span class="tubiao iconfont icon icon-shengxu" :class="{'active' : orderBy === 'price_asc'}"></span>
      </div>
      <div class="selectbox" :class="{'active': orderBy === 'price-desc'}" data-orderBy="price-desc" @click="selectOrder($event)">
        降序<span class="tubiao iconfont icon icon-jiangxu" :class="{'active' : orderBy === 'price_desc'}"></span>
      </div>
      <div class="selectbox" >
        筛选<span class="tubiao iconfont icon icon-shaixuanguolv"></span>
      </div>
    </section>
    <section class="product-list">
      <div class="product-container">
        <div class="v-header">
          <div class="v-card" v-for="(item) in productList" :key="item.id" @click="gotoDelatil(item.id)">
            <div class="van-img">
              <img :src="item.imageHost + item.mainImage" alt="" />
            </div>
            <div class="van-content">
              <div class="wenzhi">
                <div>
                  {{ item.name }}
                </div>
                <div>{{ item.subtitle }}</div>
              </div>

              <div class="price">
                <span>￥</span><span class="newprice">{{ item.price }}</span>
                <span class="old-price">￥</span
                ><span class="old-price">{{ item.originalPrice }}</span>
                <span class="num">x{{ item.stock }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "good",
  data(){
    return{
      orderBy:'default'
    }
  }
};
</script>

<style></style>
<script>
import Navbar from "@/components/navbar";
import { getproductlist } from "../../api/index";

export default {
  data() {
    return {
      categoryId: this.$route.query.categoryId,
      orderBy: "default",
      pageNum: 1,
      pageSize: 20,
      productList: [], // 存放数据的数组
      // isActive: 0,
    };
  },

  components: {
    Navbar,
  },

  methods: {
    fetchProductlist() {
      const parmas = {
        categoryId: this.categoryId,
        orderBy: "default",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      getproductlist(parmas).then((res) => {
        console.log(res);
        this.productList = res.list;
        console.log(this.productList);
      });
    },
    gotoDelatil(id){
     this.$router.push('/goodsDetail/'+id)
    },
   selectOrder(e) {
     let orderBy = e.currentTarget.getAttribute('data-orderBy')
     if(orderBy === this.orderBy){
       return
     }
     this.orderBy = orderBy
   }
  },
  created() {
    this.fetchProductlist();
  },
};
</script>

<style lang="scss" scoped>
.icon {
  font-size: 40px;
}

.center {
  line-height: 40px;
  background-color: #f7f3f3;
  border-radius: 25px;
}
.logo {
  margin-top: 10px;
  display: inline-block;
  width: 30px;
  height: 20px;
  color: rgb(255, 0, 0);
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  line-height: 20px;
  border-right: solid 1px rgb(119, 111, 111);
}

.fangdajing {
  margin-left: 2px;
  display: inline-block;
  width: 190px;
  height: 20px;
  border-left: 1 solid black;
  font-size: 16px;
  color: rgb(119, 111, 111);
  margin-left: 7px;
  line-height: 20px;
}
.selectitem {
  font-size: 13px;
  position: fixed;
  top: 0;
  background-color: #ffffff;
  margin-top: 59px;
  height: 40px;
  width: 100%;
  border-top: solid 1px rgb(214, 208, 208);
  border-bottom: solid 1px rgb(226, 220, 220);
  display: flex;
  .selectbox {
    width: 25%;
    text-align: center;
    line-height: 40px;

    .tubiao {
      display: inline-block;
      font-size: 13px;
      box-sizing: border-box;
      padding-bottom: 3px;
    }
  }
}

.product-container {
  margin-top: 102px;
  width: 100%;

  .v-header {
    // display: flex;
    .v-card {
      width: 100%;
      margin: 8px 0 0 0;
      padding: 0;
      display: flex;

      .van-img {
        height: 88px;
        width: 88px;
        img {
          border-radius: 5px;
          width: 88px;
          height: 88px;
        }
      }
    }

    .van-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .wenzhi {
        font-size: 12px;
      }
      .num {
        float: right;
        color: #aca8a8;
      }
    }
  }

  .price {
    font-size: 12px;
    .newprice {
      font-size: 17px;
    }
    .old-price {
      text-decoration: line-through;
      color: #aca8a8;
    }
  }
}

.active{
  color:red
}
</style>
